<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="./css/index.css">
	<body>
		<section id="wrap">
			<!--开机动画-->
			<div id="mask">
				<div class="up"></div>
				<div class="down"></div>
				<span class="line"></span>
			</div>
			
			<header id="head">
				<div class="headMain">
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png">
						</a>
						
					</h1>
					<div class="music">
						<audio src="./img/audio.mp3" loop></audio>
					</div>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									
									<div class="up"><img src="img/home_gruen.png"></div>
									<div class="down"><img src="img/home.png"></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
					<div class="arrow"></div>
					
					
				</div>
			</header>
			<section id="content">
				<ul class="list">
					<li class="home"> 
						<section>
							<ul class="home1">
								<li class="active"><div class="item commonTile">one Layer</div></li>
								<li><div class="item commonTile">tow Layer</div></li>
								<li><div class="item commonTile">three Layer</div></li>
								<li><div class="item commonTile">four Layer</div></li>
							</ul>
							<ul class="home2">
								<li class="active"></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</section>
					</li>
					<li class="course">
						<section>
							<header class="course1 commonTile">
								<span>EINIG</span><br/>
								<span>UNSERE</span><br/>
								<span>UNDEN</span><br/>
							</header>
							<div class="course2 commonText">
								<p>
									Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann. 
									<br />
									Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.
								</p>
							</div>
							<div class="course3">
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								<div class="item">
									<div class="backFace"></div>
									<div class="face">我是前端工程师</div>
								</div>
								
							</div>
							<div class="plane1"></div>
							<div class="plane2"></div>
							<div class="plane3"></div>
						</section>
					</li>

					<li class="works">
						<section>
							<header class="works1 commonTile">
								<span>EINBLICK</span> <br/>
								<span>ERKENNTNIS</span> <br/>
								<span>ERGEBNIS</span> <br/>
							</header>
							<div class="works2">
								<div class="item">
									<img src="./img/worksimg1.jpg"/>
									<div class="mark">
										<span>java工程师</span>
										<div class="icon">
											
										</div>
									</div>
								</div>
								<div class="item">
									<img src="./img/worksimg2.jpg"/>
									<div class="mark">
										<span>前端工程师</span>
										<div class="icon">
											
										</div>
									</div>
								</div>
								<div class="item">
									<img src="./img/worksimg3.jpg"/>
									<div class="mark">
										<span>全栈工程师</span>
										<div class="icon">
											
										</div>
									</div>
								</div>
								<div class="item">
									<img src="./img/worksimg4.jpg"/>
									<div class="mark">
										<span>架构师</span>
										<div class="icon">
											
										</div>
									</div>
								</div>
								
							</div>
							<div class="works3">

								
							</div>
							
							<div class="pencel1"></div>
						    <div class="pencel2"></div>
						    <div class="pencel3"></div>

						</section>
					</li>

					<li class="about">
						<section>
							<header class="about1 commonTile">
								<span>DIE</span><br>
								<span>SPEZIELLE</span><br>
								<span>VIELFALT</span><br>
							</header>
							<div class="about2">
								<p class="commonText">Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.</p>
							</div>
							<div class="about3">
								<div class="item">
									<span></span>
									<ul data-src = "img/about1.jpg"></ul>
								</div>
								<div class="item">
									<span></span>
									<ul data-src = "img/about3.jpg"></ul>
								</div>
								<div class="about4"></div>
							</div>
						</section>
					</li>

					<li class="team">
						<section>
							<header class="team1 commonTile">
								<span>WIR SIND </span><br>
								<span>VOXELAIR </span><br>
							</header>
							<div class="team2">
								<p class="commonText">
									Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe. 
								</p>
								<p class="commonText">
									Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.
								</p>
							</div>
							<div class="team3">
								<ul>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
							
						</section>
					</li>

				</ul>
				<ul class="dot">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript" src="./js/index.js"></script>
</html>
